<template>
    <div>
        <el-menu default-active="2" :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-menu-item index="1" :route="{ path: '/' }">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-date"></i>
                    <span>场景案例</span>
                </template>
                <el-submenu index="2-1">
                    <template slot="title">性能优化</template>
                    <el-menu-item index="2-1-1" :route="{ path: '/xunigundong' }">虚拟滚动</el-menu-item>
                    <el-menu-item index="2-1-2" :route="{ path: '/SvgDemo' }">SVG封装</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: "Nav",
    methods: {
        // 菜单打开事件
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        // 菜单关闭事件
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
    },
}
</script>

<style lang="scss" scoped>
:deep .el-menu-item,
.el-submenu {
    text-align: left;
}
</style>
